<template>
  <div>
  <el-col :span="3" id="nav">
    <el-menu
      :default-active="activeIndex" class="el-menu-vertical-demo" background-color="#3A413C" text-color="white" active-text-color="#409EFF">
      
        <el-menu-item v-for="tab in tabs" :index="tab.tabindex" v-on:click="currentTab = tab.tabname" v-bind:key="tab.tabname">
          <span slot="title">{{tab.tabname}}</span>
        </el-menu-item>   
      
      </el-menu>
    </el-col>
    <component v-bind:is="currentTabComponent" class="tab"></component>
  </div>
</template>

<script>
  import Mystu from './my-stu'
  import Myindex from './my-index'
  import Insertstu from './insertstu'
  import Insertmark from './insertmark'
export default {
  	data(){
      return{
        currentTab:'首页',
        tabs:[{tabname:'首页',tabindex:'1'},{tabname:'学生情况',tabindex:'2'},{tabname:'录入学生',tabindex:'3'},{tabname:'录入成绩',tabindex:'4'}],
        activeIndex:'1'
      }
    },
    computed:{
      currentTabComponent:function(){
        if (this.currentTab=="首页") {
          return 'tab-index'.toLowerCase();
        }else if (this.currentTab=="学生情况") {
          return 'tab-stu'.toLowerCase();
        }else if (this.currentTab=="录入学生") {
          return 'tab-instu'.toLowerCase();
        }else if (this.currentTab=="录入成绩") {
          return 'tab-inmark'.toLowerCase();
        }
        
      }
    },
    components:{
      "tab-index":Myindex,
      "tab-stu":Mystu,
      "tab-instu":Insertstu,
      "tab-inmark":Insertmark
    }
}
</script>

<style type="text/css">
  #nav{
    position: absolute;
  }
  .tab {
    border: 1px solid #ccc;
    padding: 10px;
  }
</style>